<template>
  <Container>
    <div class="container-header large" slot="header">
      <Form class="search">
        <Row>
          <Col span="6">
            <FormItem label="奖品名称">
              <!-- <Select v-model="list.form.prizeName" filterable clearable placeholder="奖品名称" @on-change="onSearchBtnClick">
                <Option v-for="(item, index) in prizeList" :key="index" :value="item">{{item}}</Option>
              </Select> -->
              <Suggestion
                placeholder="奖品名称"
                v-model="list.form.prizeName"
                @enter="onSearchBtnClick"
                @search="getAllPrizes"
                @focus="onFocus"
                @select="onSearchBtnClick"
                @clear="prizeList = []"
                :data="prizeList">
              </Suggestion>
            </FormItem>
            <FormItem label="奖品类别">
              <Select v-model="list.form.prizeTypeEnum" @on-change="onSearchBtnClick" clearable>
                <Option value="COUPON">现金券</Option>
                <Option value="ENTITY">实物</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="门店名称">
              <Input v-model="list.form.storeName" placeholder="门店名称" :maxlength="20" @on-enter="onSearchBtnClick"/>
            </FormItem>
            <FormItem label="门店联系人">
              <Input v-model="list.form.storeLinkName" placeholder="门店联系人" :maxlength="20" @on-enter="onSearchBtnClick"/>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="联系手机">
              <Input v-model.trim="list.form.storePhone" placeholder="门店联系手机" :maxlength="11" @on-enter="onSearchBtnClick"/>
            </FormItem>
            <FormItem label="时间">
               <DatePicker type="daterange" v-model="list.form.time" placement="bottom-end" placeholder="请选择时间" :clearable="false"></DatePicker>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="是否中奖">
              <Select v-model="list.form.isWin" clearable @on-change="onSearchBtnClick">
                <Option value="是">是</Option>
                <Option value="否">否</Option>
              </Select>
            </FormItem>
          </Col>
          <Col class-name="search" span="2">
            <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <export-btn @onExport="onExport" class="item" slot="extra"></export-btn>
      <TabPane label="抽奖明细" name="tab1">
        <homeTable
          :list="list"
          @getData="getData"
          @onPageSizeChange="onPageSizeChange"
          @onPageChange="onPageChange"
        />
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import Suggestion from '~/Suggestion'
import homeTable from "~/homeTable"
import LotteryListData from "./list/LotteryListData"
import { clearEmpty, formatDate } from '@/util'
export default {
  // name: 'sales/lottery/list',
	components: {
    homeTable,
    Suggestion
	},
  data() {
    return {
      tab: "tab1",
      list: LotteryListData,
      prizeList: [],
      timer: null,
      oTimerDetail: null,
      loadingDetail: false
    };
  },
  mounted() {
    this.list.currentPage =  ~~this.$route.query.currentPage || 1;
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize;
		this.$bus.$on("onLookTicket", this.onLookTicket);
    this.$bus.$on("onLookAddress", this.onLookAddress)
    // this.getAllPrizes();
		this.getData();
  },
  destroyed() {
    this.$bus.$off();
  },
  methods: {
    onSearchBtnClick() {
      this.timer && clearTimeout(this.timer) // 快速点击select
      this.list.currentPage = 1
      this.timer = setTimeout(() => {
        this.getData()
      }, 300)
    },
    getData() {
      this.list.status = "loading"
      let v = this.formatParam();
      if (!v) return
      let param = {
        ...this.formatParam(),
        current: this.list.currentPage,
        size: this.list.pageSize
      }
      this.$ajaxGet("/lottery/record/es_page", param).then(data => {
          this.list.data = []
          this.list.totalItem = Number(data.total)
          this.list.data = (data.records || []).map(item => {
            return {
              ...item
            }
          })
          this.list.status = "pass"
        }).catch(() => {
          this.list.status = "error"
        })
    },
    getAllPrizes() {
      let param = {
        prizeName: this.list.form.prizeName
      }
      this.$ajaxGet('/lottery/prize/prize_list', param).then(data => {
        this.prizeList = (data.records || []).map(item => item.name)
      })
    },
    onFocus() {
      this.getAllPrizes()
    },
    formatParam() {
      let param = {
        prizeName: this.list.form.prizeName,
        prizeTypeEnum: this.list.form.prizeTypeEnum,
        storeName: this.list.form.storeName,
        storeLinkName: this.list.form.storeLinkName,
        storePhone: this.list.form.storePhone,
        isWin: !this.list.form.isWin ? null : (this.list.form.isWin === '是' ? true : false)
      }
      if (this.list.form.time[0] && this.list.form.time[1] && this.list.form.time.length === 2) {
        param.startTime = formatDate(this.list.form.time[0]) + ' 00:00:00'
        param.endTime = formatDate(this.list.form.time[1]) + ' 23:59:59'
      }
      return clearEmpty(param)
    },
    onExport() {
      if (this.list.data.length === 0) {
        this.$Notice.warning({
          title: `暂无数据，无法导出`
        })
        return
      }
      let v = this.formatParam();
      if (!v) return
      let param = {
        ...this.formatParam()
      }
      this.$jsonPost('/lottery/record/export', param).then(data => {
        this.list.status = 'pass'
        this.$Modal.success({
          title: '导出成功',
          content: '请到首页-导出列表处下载',
          onOk: () => {
            this.$router.push('/home/export/list')
          }
        })
      }).catch(err => {
        this.list.status = 'pass'
        this.$Notice.error({
          title: '导出失败'
        })
      })
    },
    onLookTicket(couponId) {
      this.$router.push({
        name: 'coupon/detail',
        query: {
          id: couponId
        }
      })
		},
		onLookAddress({address, storeLinkName, storePhone}) {
			this.$Modal.info({
        title: '查看地址',
        content: `<p class="tc big">${address}</p><p class="tc big">${storeLinkName ? storeLinkName : '-'}，${storePhone ? storePhone : '-'}</p>`
      })
    },
    onPageChange(number) {
			this.list.currentPage = number;
			this.$router.push({
				name: "sales/lottery/list",
				query: {
					currentPage: this.list.currentPage,
					pageSize: this.list.pageSize
				}
			});
      this.getData();
		},
    onPageSizeChange(pageSize) {
			this.list.currentPage = 1;
			this.list.pageSize = pageSize;
			this.$router.push({
				name: "sales/lottery/list",
				query: {
					currentPage: this.list.currentPage,
					pageSize: this.list.pageSize
				}
			});
			this.getData();
		}
  },
  watch: {
		$route() {
			let page = ~~this.$route.query.currentPage;
			let table = this.list;
			if (table.currentPage !== page) {
				table.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage;
				this.getData();
			}
		}
	}
};
</script>
